<template>
  <div class="turnover_print">
    <print-code :printData="printList" ref="printCode"></print-code>
    <one-title title="周转单打印" @refreshData="refresh">
      <div class="mes_btn">
        <el-button
          v-btn-permission="'printCode'"
          @click="handlePrint" type="success">
          <i class="iconfont icon-print"></i>
          打印条码
        </el-button>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        :codeScan="true"
        code-placeholder="[周转码]"
        @codeSubmit="handleCodeScan"
        :searchList="tableColumns"
        ref="mesSearch"
        :searchResult="searchResult"
        @searchInfo="search"
      ></mes-search-comp>
      <div class="table_container">
        <el-table
          ref="tableNode"
          v-loading="isLoading"
          :max-height="tableMaxHeight"
          :row-class-name="({row}) => $highlightSelectedRow(row, selectItems)"
          :data="listData.list"
          @row-click="(row) => $refs.tableNode.toggleRowSelection(row)"
          @sort-change="handleSortChange"
          @selection-change="handleSelectionChange"
          @filter-change="handleFilterChange"
          border
          stripe
          tooltip-effect="dark">
          <el-table-column
            width="40"
            type="selection"
            align="center">
          </el-table-column>
          <mes-col-comp
            :key="index"
            v-for="(column, index) in tableColumns"
            :column="column">
          </mes-col-comp>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
  </div>
</template>

<script>
/**
 * @author liubaohui
 */
import setTableColumns from './tableColumns'
import {PrintCode} from './components'

let listInterFace = 'a/turnoverbatch/turnoverBatch/list'

export default {
  name: 'TurnoverPrint',
  components: {
    PrintCode
  },
  data() {
    return {
      isLoading: false, // 数据加载中
      searchParams: {}, // 查询参数
      sortOrder: {}, // 排序对象
      selectItems: [], // 选中的数据
      searchResult: NaN, // 搜索结果数
      codeValue: '',
      curPageSize: null,
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    tableColumns() {
      return setTableColumns.call(this)
    },
    saveState() {
      return this.$store.state.saveState
    },
    // 周转状态
    batchStatus() {
      return this.$store.getters.dictAddAll('batchStatus')
    },
    // 可搜索的周转进度状态：“待开工”、“生产中”、“已完工”
    partBatchProcessStatus() {
      return this.$store.getters.filterDictByValues('batchProcessStatus', ['ToBeStarted', 'Producing', 'Finished'])
    },
    // 可搜索的周转进度状态的id数组
    partBatchProcessId() {
      return this.partBatchProcessStatus.reduce((pre, cur) => [...pre, cur.id], []).toString()
    },
    // 列表数据
    listData() {
      return this.$store.state.turnoverPrint.listData
    },
    // 打印数据
    printList() {
      return this.$store.state.turnoverPrint.printList
    }
  },
  methods: {
    handleFilterChange(filters) {
      let filterParams = this.$filterParams(this.tableColumns, filters)
      Object.assign(this.searchParams, filterParams.search)
      this.sortOrder = filterParams.order // 排序对象
      this.$refs.tableNode.clearSort()
      this.init()
    },
    handleCodeScan(value) {
      this.codeValue = value
      this.init()
    },
    // 请求数据整理
    getPostData(page) {
      const fields = ['workorderId', 'workorderNumber', 'id', 'turnoverStatusId', 'turnoverStatusValue', 'turnoverProcessStatusId', 'turnoverProcessStatusValue', 'trackDemandId', 'trackDemandValue', 'taskTypeId', 'taskTypeValue']
      let postData = {
        pageNo: page ? page.pageNo : 1,
        pageSize: page ? page.pageSize : this.listData.pageSize || 15,
        sort: this.sortOrder,
        query: {
          columns: this.tableColumns.reduce((pre, cur) => [...pre, cur.prop], fields),
          ...this.searchParams,
          viewSource: 3,
        }
      }
      if (!postData.query.turnoverProcessStatusId) {
        postData.query.turnoverProcessStatusId = this.partBatchProcessId
        postData.query.viewSource = 3
      }
      if (this.codeValue) {
        postData.query.number = this.codeValue
      }
      return postData
    },
    init(page) {
      let data = this.getPostData(page)
      this.isLoading = true
      let postData = {
        method: 'post',
        url: listInterFace,
        module: 'turnoverPrint',
        data: data,
        state: 'listData',
      }
      this.$store.dispatch('saveData', postData).then(res => {
        if (Object.keys(this.searchParams).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 打印方法
    handlePrint() {
      if (this.saveState === true) return
      if (this.selectItems.length === 0) {
        return this.$message.error({
          message: '未选择任何数据',
          duration: 1500,
          center: true
        })
      }
      let postData = {
        method: 'post',
        url: 'a/turnoverbatch/turnoverBatch/printingturnoverorder',
        data: {
          turnoverIds: this.selectItems.reduce((pre, cur) => [...pre, cur.id], []).toString()
        },
        module: 'turnoverPrint',
        state: 'printList',
      }
      this.$store.commit('SetSaveState', true)
      this.$store.dispatch('saveData', postData).then(() => {
        this.$refs.printCode.startPrint()
      }).finally(() => {
        this.$store.commit('SetSaveState', false)
      })
    },
    // 搜索方法
    search(params) {
      this.sortOrder = {} // 排序对象
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.searchParams = params
      this.init()
    },
    // 刷新方法
    refresh() {
      this.searchParams = {} // 查询参数
      this.sortOrder = {} // 排序对象
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.init()
    },
    // 排序方法
    handleSortChange(item) {
      this.sortOrder = this.$getSortOrder(item)
      this.init()
    },
    // 选中方法
    handleSelectionChange(val) {
      this.selectItems = val
    }
  }
}
</script>
